<template>
	<view class="user" :class="isDark?'dark':''" :style="{'background':isDark?'#1c1c1c':'#f6f6f6','min-height':isDark?'100vh':'auto'}">
		<!-- 顶部导航栏 -->
		<view class="header" :style="[{height:CustomBar*2 + 25 + 'rpx'}]">
			<view class="cu-bar bg-white" :style="{'height': CustomBar*2 + 25 + 'rpx','padding-top':StatusBar*2 + 25 + 'rpx'}">
				<view class="action" @tap="back">
					<text class="cuIcon-back"></text>
				</view>
				<view class="content text-bold" :style="[{top:StatusBar*2 + 25 + 'rpx'}]">
					<view class="section-sub" style="line-height: 30px;">
						<text style="font-size:30upx">
							{{ getPageTitle }}
						</text>
					</view>
				</view>
			</view>
		</view>
		<view :style="[{padding:NavBar + 'px 10px 0px 10px'}]"></view>

		<!-- 主体内容区 -->
		<scroll-view class="content-scroll" scroll-y>
			<view class="content-wrapper">
				<!-- 快捷操作按钮 -->
				<view class="quick-actions">
					<button class="action-btn get-info-btn" @tap="goToGetAppInfo">
						<text class="tn-icon-scan"></text>
						<text>{{$t('syappbox.post.sanapp')}}</text>
					</button>
					<button class="action-btn scan-btn" @tap="parseAppInfo">
						<text class="tn-icon-code"></text>
						<text>{{$t('syappbox.post.analysisapp')}}</text>
					</button>

				</view>

				<!-- 表单区域 -->
				<view class="form-section">
					<!-- 应用图标上传 -->
					<view class="section-title">
						<text class="title-text">{{ type === 'version' ? $t('syappbox.post.newappicon') : $t('syappbox.post.appicon') }}</text>
						<view class="title-line"></view>
					</view>

					<view class="logo-upload">
						<view class="logo-preview" @tap="chooseAppLogo">
							<u-image v-if="formData.logo" 
								:src="formData.logo" 
								width="160rpx"
								height="160rpx"
								:radius="40"
								mode="aspectFill"
								:lazy-load="true"
								:fade="true"
								duration="500"
								bg-color="#f8faff"
								@error="onImageError"
								@load="onImageLoad">
								<u-loading slot="loading"></u-loading>
							</u-image>
							<text v-else class="tn-icon-upload"></text>
						</view>
						<text class="upload-tip">{{ type === 'version' ? $t('syappbox.post.uploadnewappicon') : $t('syappbox.post.uploadappicon') }}</text>
						<text class="hint-text" v-if="type === 'version' && lastVersion">
							{{$t('syappbox.post.defaultappicon')}}
						</text>
					</view>

					<!-- 基本信息/版本信息 -->
					<view class="section-title margin-top-lg">
						<text class="title-text">{{ type === 'version' ? $t('syappbox.post.versioninfo') : $t('syappbox.post.basicinfo') }}</text>
						<view class="title-line"></view>
					</view>

					<!-- 应用名称/版本名称 -->
					<view class="form-group">
						<text class="label">
							{{$t('syappbox.post.appname')}}
							<text class="optional" v-if="type === 'version'">{{$t('syappbox.post.optional')}}</text>
							<text class="required" v-else>*</text>
						</text>
						<input class="input" type="text" v-model="formData.name"
							:placeholder="type === 'version' ? $t('syappbox.post.newinappname') : $t('syappbox.post.inappname')" />
						<text class="hint-text" v-if="type === 'version' && lastVersion">
							{{$t('syappbox.post.defaultappname') + lastVersion.name}}
						</text>
					</view>

					<!-- 版本信息 -->
					<view class="form-group">
						<view class="section-title margin-top-lg">
							<text class="title-text">{{$t('syappbox.post.versioninfo')}}</text>
							<view class="title-line"></view>
						</view>


						<view v-if="type === 'version'">
							<text class="label">
								{{$t('syappbox.post.versionname')}}
								<text class="required">*</text>
							</text>
							<input class="input" type="text" v-model="formData.version" placeholder="1.0.1" />
							<text class="hint-text" v-if="lastVersion">
								{{$t('syappbox.post.lastversionname') + lastVersion.version}}
							</text>
						</view>
						<view v-else>
							<text class="label">
								{{$t('syappbox.post.versionnamenum')}}
								<text class="required">*</text>
							</text>
							<view class="version-inputs">
								<input class="input version-name" type="text" v-model="formData.version"
									placeholder="1.0.0" />
								<input class="input version-code" type="number" v-model="formData.versionCode"
									placeholder="100" />
							</view>
							<text class="hint-text" v-if="lastVersion">
								{{$t('syappbox.post.mastupwardversion') + lastVersion.versionCode}}
							</text>
						</view>
					</view>

					<!-- 版本码(仅版本更新时显示) -->
					<view class="form-group" v-if="type === 'version'">
						<text class="label">
							{{$t('syappbox.post.versioncode')}}
							<text class="required">*</text>
						</text>
						<input class="input" type="number" v-model="formData.versionCode" placeholder="如: 101" />
						<text class="hint-text" v-if="lastVersion">
							{{$t('syappbox.post.mastupwardcode') + lastVersion.versionCode}}
						</text>
					</view>

					<!-- 更新说明(仅版本更新时显示) -->
					<view class="form-group" v-if="type === 'version'">
						<text class="label">
							{{$t('syappbox.post.updateremark')}}
							<text class="required">*</text>
						</text>
						<textarea class="textarea" v-model="formData.info" placeholder="$t('syappbox.post.plsupdateremark')" />
					</view>

					<!-- 其他基本信息(非版本更新时显示) -->
					<template v-if="type !== 'version'">
						<!-- 原有的其他表单项 -->
						<view class="form-group">
							<text class="label">{{$t('syappbox.post.apppackagename')}}</text>
							<input class="input" type="text" v-model="formData.pkname" placeholder="$t('syappbox.post.plsapppackagename')" />
						</view>

						<view class="form-group">
							<text class="label">URL Schemes</text>
							<view class="input-wrapper">
								<input class="input" type="text" v-model="formData.urlSchemes"
									placeholder="$t('syappbox.post.plsinputurl')" />
								<view class="suffix-text">
									<text>://</text>
								</view>
							</view>
						</view>
					</template>

					<!-- APP大小 -->
					<view class="form-group">
						<text class="label">
							{{$t('syappbox.post.appsize')}}
							<text class="optional" v-if="type === 'version'">{{$t('syappbox.post.optional')}}</text>
							<text class="required" v-else>*</text>
						</text>
						<view class="input-wrapper">
							<input class="input" type="number" v-model="formData.sizeDisplay"
								:placeholder="type === 'version' ? $t('syappbox.post.plsnewappsize') : $t('syappbox.post.plsappsize')" />
							<picker :value="formData.sizeUnit" :range="sizeUnits" @change="handleSizeUnitChange">
								<view class="suffix-select">
									<text>{{formData.sizeUnit}}</text>
									<text class="tn-icon-down"></text>
								</view>
							</picker>
						</view>
						<text class="hint-text" v-if="type === 'version' && lastVersion">
							{{$t('syappbox.post.nulldefaultappsize') + formatSize(lastVersion.size)}}
						</text>
					</view>

					<!-- 下载配置 -->
					<view class="section-title margin-top-lg">
						<text class="title-text">{{$t('syappbox.post.downloadset')}}</text>
						<view class="title-line"></view>
					</view>

					<!-- 网盘类型 -->
					<view class="form-group">
						<text class="label">{{$t('syappbox.post.cloudtype')}}<text class="required">*</text></text>
						<view class="select-btn" @tap="openDiskTypePicker">
							<text class="btn-text">{{getDiskTypeName}}</text>
							<text class="tn-icon-right"></text>
						</view>
					</view>

					<!-- 下载链接 -->
					<view class="form-group">
						<text class="label">{{$t('syappbox.post.downloadlink')}}<text class="required">*</text></text>
						<input class="input" type="text" maxlength="-1" v-model="formData.downloadUrl"
							:placeholder="downloadUrlPlaceholder" />
					</view>

					<!-- 提取码 -->
					<view class="form-group">
						<text class="label">{{$t('global.extractcode')}}</text>
						<input class="input" type="text" v-model="formData.extractCode"
							:placeholder="extractCodePlaceholder" />
					</view>

					<!-- 应用分类(非版本更新时显示) -->
					<template v-if="type !== 'version'">
						<!-- 原有的应用分类相关表单项 -->
						<view class="form-group">
							<view class="section-title margin-top-lg">
								<text class="title-text">{{$t('syappbox.post.apptype')}}</text>
								<view class="title-line"></view>
							</view>
							<view class="category-section">
								<view class="category-group">
									<view class="label-wrapper">
										<text class="label">{{$t('syappbox.post.apppartition')}}
											<text class="required">*</text></text>
										<text class="selected-count">{{$t('syappbox.post.partition123')}}</text>
									</view>

									<!-- 已选分类展示 -->
									<view class="selected-tags" v-if="selectedCategories.length > 0">
										<view class="selected-tag" v-for="id in selectedCategories" :key="id">
											<text>{{getCategoryName(id)}}</text>
											<text class="remove-tag" @tap.stop="toggleCategory(id)">×</text>
										</view>
									</view>

									<!-- 选择分类按钮 -->
									<view class="select-btn" style="margin-bottom: 40rpx;" @tap="openCategoryPicker">
										<text class="btn-text">{{$t('syappbox.post.selpartition')}}</text>
										<text class="tn-icon-right"></text>
									</view>

									<view class="label-wrapper">
										<text class="label">{{$t('syappbox.post.applable')}}
											<text class="required">*</text></text>
										<text class="selected-count">{{$t('syappbox.post.partition110')}}</text>
									</view>

									<!-- 已选标签展示 -->
									<view class="selected-tags" v-if="selectedTags.length > 0">
										<view class="selected-tag" v-for="id in selectedTags" :key="id">
											<text>{{getTagName(id)}}</text>
											<text class="remove-tag" @tap.stop="toggleTag(id)">×</text>
										</view>
									</view>

									<!-- 选择标签按钮 -->
									<view class="select-btn" style="margin-bottom: 40rpx;" @tap="openTagPicker">
										<text class="btn-text">{{$t('syappbox.post.selectlable')}}</text>
										<text class="tn-icon-right"></text>
									</view>

									<!-- 应用铭牌 -->	
									<view class="form-group">
										<text class="label">{{$t('syappbox.post.appnameplate')}}
											<text class="required">*</text>
										</text>
										<view class="radio-group">
										<view v-for="item in badgeTypes" :key="item.value"
											:class="['radio-item', {'radio-active': formData.badge === item.value}]"
											@tap="formData.badge = item.value">
											{{ item.name }}
										</view>
										</view>
									</view>
								</view>
							</view>
						</view>

						<!-- 应用介绍 -->
						<view class="form-group">
							<view class="section-title margin-top-lg">
								<text class="title-text">{{$t('syappbox.post.appintro')}}</text>
								<view class="title-line"></view>
							</view>
							<textarea class="textarea" v-model="formData.info" placeholder="$t('syappbox.post.plsappintro')" maxlength="500" />
							<view class="word-count" style="text-align: right; color: #999999;">
								{{formData.info.length}}/500
							</view>
						</view>

						<!-- 应用预览图 -->
						<view class="preview-upload">
							<scroll-view scroll-x class="preview-scroll" :scroll-left="scrollLeft"
								:scroll-with-animation="true">
								<text class="upload-tip">{{$t('syappbox.post.uploadapppreview')}}</text>
								<view class="preview-list">
									<!-- 已上传的图片放在前面 -->
									<view v-for="(img, index) in formData.previewImages" :key="index"
										class="preview-item">
										<u-image 
											:src="img" 
											width="240rpx"
											height="440rpx"
											mode="aspectFill"
											:radius="20"
											:lazy-load="true"
											:fade="true"
											duration="500"
											bg-color="#f8faff"
											@error="onImageError"
											@load="onImageLoad">
											<u-loading slot="loading"></u-loading>
										</u-image>
										<view class="delete-btn" @tap.stop="deletePreview(index)">
											<text class="tn-icon-close"></text>
										</view>
									</view>
									<!-- 上传按钮始终在最后 -->
									<view class="preview-item upload-btn" @tap="choosePreviewImages"
										v-if="formData.previewImages.length < 9">
										<text class="tn-icon-add"></text>
									</view>
								</view>
							</scroll-view>
							<view class="scroll-indicator" v-if="formData.previewImages.length > 1">
								<text class="indicator-text">{{$t('syappbox.post.swipeseemore')}}</text>
								<text class="tn-icon-right indicator-icon"></text>
							</view>

						</view>
					</template>
				</view>
				<!-- 在表单区域的最后添加提交按钮 -->
				<view class="submit-section">
					<button class="submit-btn" @tap="submitForm">
						<text class="btn-text">{{ type === 'version' ? $t('syappbox.post.pubupdate') : $t('syappbox.post.submitreview') }}</text>
					</button>
				</view>
			</view>
		</scroll-view>
		<!-- 修改分类选择弹出层 -->
		<u-popup v-model="showCategoryPicker" mode="bottom" :mask-close-able="true" border-radius="24">
			<view class="picker-popup">
				<view class="picker-header">
					<text class="cancel" @tap="closeCategoryPicker">{{$t('common.cancel')}}</text>
					<text class="title">{{$t('syappbox.post.selpartition')}}</text>
					<text class="confirm" @tap="confirmCategory">{{$t('common.sure')}}</text>
				</view>

				<view class="search-box">
					<text class="tn-icon-search"></text>
					<input type="text" v-model="categorySearch" placeholder="$t('syappbox.post.searchpartition')" @input="searchCategories" />
				</view>

				<scroll-view class="picker-content" scroll-y @scrolltolower="loadMoreCategories">
					<!-- 添加加载动画 -->
					<view class="loading-wrapper" v-if="loadingCategories">
						<view class="loading-spinner"></view>
						<text class="loading-text">{{$t('common.loadmore')}}</text>
					</view>

					<view class="tags-container" v-else>
						<view v-for="item in filteredCategories" :key="item.id"
							:class="['tag', {'tag-active': tempSelectedCategories.includes(item.id)}]"
							@tap="toggleTempCategory(item.id)">
							{{ item.name }}
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>

		<!-- 修改标签选择弹出层 -->
		<u-popup v-model="showTagPicker" mode="bottom" :mask-close-able="true" border-radius="24">
			<view class="picker-popup">
				<view class="picker-header">
					<text class="cancel" @tap="closeTagPicker">{{$t('common.cancel')}}</text>
					<text class="title">{{$t('syappbox.post.selectlable')}}</text>
					<text class="confirm" @tap="confirmTag">{{$t('common.sure')}}</text>
				</view>

				<view class="search-box">
					<text class="tn-icon-search"></text>
					<input type="text" v-model="tagSearch" placeholder="$t('syappbox.post.searchlable')" @input="searchTags" />
				</view>

				<scroll-view class="picker-content" scroll-y @scrolltolower="loadMoreTags">
					<!-- 添加加载动画 -->
					<view class="loading-wrapper" v-if="loadingTags">
						<view class="loading-spinner"></view>
						<text class="loading-text">{{$t('common.loadmore')}}</text>
					</view>

					<view class="tags-container" v-else>
						<view v-for="item in filteredTags" :key="item.id"
							:class="['tag', {'tag-active': tempSelectedTags.includes(item.id)}]"
							@tap="toggleTempTag(item.id)">
							{{ item.name }}
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<!-- 其他弹出层的后面添加网盘类型选择弹出层 -->
		<u-popup v-model="showDiskTypePicker" mode="bottom" :mask-close-able="true" border-radius="24">
			<view class="picker-popup">
				<view class="picker-header">
					<text class="cancel" @tap="closeDiskTypePicker">{{$t('common.cancel')}}</text>
					<text class="title">{{$t('syappbox.post.selcloudtype')}}</text>
					<text class="confirm" @tap="confirmDiskType">{{$t('common.sure')}}</text>
				</view>

				<scroll-view class="picker-content" scroll-y>
					<view class="disk-type-list">
						<view v-for="item in diskTypes" :key="item.value" class="disk-type-item"
							:class="{'disk-type-active': tempDiskType === item.value}"
							@tap="selectTempDiskType(item.value)">
							<view class="disk-name">{{item.name}}</view>
							<view class="disk-desc" v-if="item.subText">{{item.subText}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>

		<!-- 在已有的样式中添加以下内容 -->
		<u-popup v-model="showJsonParser" mode="center" :mask-close-able="true" border-radius="24">
			<view class="json-parser-popup">
				<view class="parser-header">
					<text class="title">{{$t('syappbox.post.analysisappinfo')}}</text>
					<text class="close-btn" @tap="closeJsonParser">×</text>
				</view>

				<view class="parser-content">
					<textarea class="json-input" v-model="jsonContent" placeholder="$t('syappbox.post.plsscanappinfo')" :maxlength="-1"
						auto-height></textarea>
				</view>

				<view class="parser-footer">
					<button class="cancel-btn" @tap="closeJsonParser">{{$t('common.cancel')}}</button>
					<button class="confirm-btn" @tap="confirmParseJson">{{$t('syappbox.post.analysis')}}</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		localStorage
	} from '../../../js_sdk/mp-storage/mp-storage/index.js'
	import darkModeMixin from '@/utils/darkModeMixin.js'

	export default {
		mixins: [darkModeMixin],
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				NavBar: this.StatusBar + this.CustomBar,
				formData: {
					logo: '',
					previewImages: [],
					name: '',
					pkname: '',
					version: '',
					versionCode: '',
					info: '',
					diskType: 'lz',
					downloadUrl: '',
					extractCode: '',
					urlSchemes: '',
					sizeDisplay: '',
					sizeUnit: 'Mb',
					badge: '1',
					system: 'android'
				},
				categories: [],
				tags: [],
				selectedCategories: [],
				selectedTags: [],
				categorySearch: '',
				tagSearch: '',
				filteredCategories: [],
				filteredTags: [],
				tempSelectedCategories: [],
				tempSelectedTags: [],
				categoryPage: 1,
				tagPage: 1,
				categoryLoading: false,
				tagLoading: false,
				showCategoryPicker: false,
				showTagPicker: false,
				diskTypes: [{
						value: 'lz',
						name: $t('syappbox.post.bluemcloud'),
						subText: 'IOS/Android'
					},
					{
						value: '123',
						name: $t('syappbox.post.123cloud'),
						subText: 'IOS/Android'
					},
					{
						value: 'zl',
						name: $t('syappbox.post.otherdirect'),
						subText: 'IOS/Android'
					},
					{
						value: 'other',
						name: $t('syappbox.post.othercloud'),
						subText: 'Android'
					}
				],
				systemTypes: [{
						value: 'android',
						name: $t('syappbox.post.android')
					},
					{
						value: 'ios',
						name: $t('syappbox.post.ios')
					}
				],
				badgeTypes: [], // 改为空数组,在mounted中动态设置
				sizeUnits: ['Mb', 'Gb'],
				showDiskTypePicker: false,
				tempDiskType: '',
				themeColor: {
					primary: '#57d1b1',
					gradient: 'linear-gradient(135deg, #57d1b1, #009efd)'
				},
				diskTypeConfig: {
					lz: {
						urlPlaceholder: $t('syappbox.post.plsbluemcloudlink'),
						codePlaceholder: $t('syappbox.post.plsbluemcode')
					},
					'123': {
						urlPlaceholder: $t('syappbox.post.pls123cloudlink'),
						codePlaceholder: $t('syappbox.post.pls123cloudcode')
					},
					zl: {
						urlPlaceholder: $t('syappbox.post.plsotherdirect'),
						codePlaceholder: $t('syappbox.post.directnocode')
					},
					other: {
						urlPlaceholder: $t('syappbox.post.plscloudlink'),
						codePlaceholder: $t('syappbox.post.plsextractcode')
					}
				},
				SPgetAppInfoUrl: this.$API.SPgetAppInfoUrl(),
				userInfo: null,
				token: "",
				showJsonParser: false,
				jsonContent: '',
				scrollLeft: 0,
				loadingCategories: false, // 新增:分类加载状态
				loadingTags: false, // 新增:标签加载状态
				isEdit: false, // 是否为编辑模式
				appId: null, // 应用ID
				group: '', // 用户组
				type: 'app', // 默认为应用发布模式
				lastVersion: null, // 存储上一个版本信息
			}
		},
		computed: {
			getDiskTypeName() {
				const diskType = this.diskTypes.find(item => item.value === this.formData.diskType)
				return diskType ? diskType.name : this.$t('syappbox.post.plsselcloudlink')
			},
			downloadUrlPlaceholder() {
				return this.diskTypeConfig[this.formData.diskType]?.urlPlaceholder || this.$t('syappbox.post.plsdownloadlink')
			},
			extractCodePlaceholder() {
				return this.diskTypeConfig[this.formData.diskType]?.codePlaceholder || this.$t('syappbox.post.plsextractcode')
			},
			getPageTitle() {
				if (this.type === 'version') {
					return this.$t('syappbox.post.pubnewupdate');
				} else if (this.isEdit) {
					return this.$t('syappbox.post.editapp');
				} else {
					return this.$t('syappbox.post.publishapp');
				}
			}
		},
		onShow() {
			var that = this;
			// 获取配置的URL和用户信息
			if (localStorage.getItem('userinfo')) {
				that.userInfo = JSON.parse(localStorage.getItem('userinfo'));
				that.userInfo.style = "background-image:url(" + that.userInfo.avatar + ");"
			}
			if (localStorage.getItem('token')) {
				that.token = localStorage.getItem('token');
			}
			that.userStatus();
		},
		onLoad(options) {
			var that = this;
			// 获取配置的URL和用户信息
			if (localStorage.getItem('userinfo')) {
				that.userInfo = JSON.parse(localStorage.getItem('userinfo'));
				that.userInfo.style = "background-image:url(" + that.userInfo.avatar + ");"
			}
			if (localStorage.getItem('token')) {
				that.token = localStorage.getItem('token');
			}
			that.userStatus();
			// 设置操作类型和appId
			that.type = options.type || 'app';
			if (options.appId) {
				that.appId = parseInt(options.appId);
			}
			// 根据类型执行不同的初始化
			if (that.type === 'version') {
				// 发布新版本模式
				that.getLastVersion();
			} else if (that.appId) {
				// 编辑应用模式
				that.isEdit = true;
				that.loadAppInfo();
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			parseAppInfo() {
				this.showJsonParser = true;
			},
			closeJsonParser() {
				this.showJsonParser = false;
				this.jsonContent = '';
			},
			confirmParseJson() {
				var that = this;
				if (!that.jsonContent.trim()) {
					uni.showToast({
						title: that.$t('syappbox.post.plsjsondata'),
						icon: 'none'
					});
					return;
				}
				try {
					const appInfo = JSON.parse(that.jsonContent);
					// 验证必要字段
					if (!appInfo.appName && !appInfo.packageName) {
						throw new Error(that.$t('syappbox.post.invalidappjson'));
					}
					// 更新表单数据
					that.formData.name = appInfo.appName || that.formData.name;
					that.formData.pkname = appInfo.packageName || that.formData.pkname;
					that.formData.version = appInfo.versionName || that.formData.version;
					that.formData.versionCode = appInfo.versionCode || that.formData.versionCode;
					that.formData.urlSchemes = appInfo.urlScheme || that.formData.urlSchemes;
					// 处理系统类型
					if (appInfo.appType) {
						const systemType = appInfo.appType.toLowerCase();
						if (systemType === 'ios' || systemType === 'android') {
							that.formData.system = systemType;
						}
					}
					// 处理文件大小(转换为MB)
					if (appInfo.appSize) {
						let sizeInMb;
						if (appInfo.appSize > 1024 * 1024) { // 如果大于1GB
							sizeInMb = (appInfo.appSize / (1024 * 1024)).toFixed(2);
							that.formData.sizeUnit = 'Gb';
						} else {
							sizeInMb = (appInfo.appSize / 1024).toFixed(2);
							that.formData.sizeUnit = 'Mb';
						}
						that.formData.sizeDisplay = sizeInMb;
					}
					// 处理应用图标
					if (appInfo.icon) {
						// 如果是base64图片数据
						if (appInfo.icon.startsWith('data:image')) {
							that.formData.logo = appInfo.icon;
						}
						// 如果是URL
						else if (appInfo.icon.startsWith('http')) {
							that.formData.logo = appInfo.icon;
						}
					}
					// 处理应用介绍
					if (appInfo.description) {
						that.formData.info = appInfo.description;
					}
					// 处理预览图
					if (Array.isArray(appInfo.screenshots) && appInfo.screenshots.length > 0) {
						const validScreenshots = appInfo.screenshots.filter(url =>
							url.startsWith('http') || url.startsWith('data:image')
						);
						if (validScreenshots.length > 0) {
							that.formData.previewImages = [
								...that.formData.previewImages,
								...validScreenshots
							].slice(0, 9); // 最多9张
						}
					}

					uni.showToast({
						title: that.$t('syappbox.post.analysissuccess'),
						icon: 'success'
					});
					that.closeJsonParser();
				} catch (error) {
					uni.showToast({
						title: that.$t('syappbox.post.analysisfailjson'),
						icon: 'none'
					});
				}
			},
			scanAppInfo() {
				// 扫描应用信息逻辑
			},
			toggleCategory(id) {
				var that = this;
				const index = that.selectedCategories.indexOf(id)
				if (index > -1) {
					that.selectedCategories.splice(index, 1)
				} else if (that.selectedCategories.length < 3) {
					that.selectedCategories.push(id)
				} else {
					uni.showToast({
						title: that.$t('syappbox.post.mostselthree'),
						icon: 'none'
					})
				}
			},
			toggleTag(id) {
				var that = this;
				const index = that.selectedTags.indexOf(id)
				if (index > -1) {
					that.selectedTags.splice(index, 1)
				} else if (that.selectedTags.length < 10) {
					that.selectedTags.push(id)
				} else {
					uni.showToast({
						title: that.$t('syappbox.post.mostseltenlable'),
						icon: 'none'
					})
				}
			},
			submitForm() {
				var that = this;
				// 表单验证
				if (!this.validateForm()) return;
				// 构建基础提交数据
				const submitData = {
					token: that.token
				};
				if (that.type === 'version') {
					// 版本更新模式
					submitData.action = 'appVersionAdd';
					submitData.appid = that.appId;
					submitData.version = that.formData.version;
					submitData.versionCode = that.formData.versionCode;
					submitData.versionInfo = that.formData.info;
					submitData.downloadType = that.formData.diskType;
					submitData.downloadUrl = that.formData.downloadUrl;
					submitData.downloadPw = that.formData.extractCode || '';
					// 可选字段，如果有值才提交
					if (that.formData.name) {
						submitData.name = that.formData.name;
					}
					if (that.formData.logo) {
						submitData.logo = that.formData.logo;
					}
					if (that.formData.sizeDisplay) {
						submitData.size = that.convertSizeToKB();
					}
				} else {
					// 应用发布或编辑模式
					submitData.action = that.isEdit ? 'appEdit' : 'appAdd';
					if (that.isEdit) {
						submitData.appid = that.appId;
					}
					// 添加应用发布/编辑需要的字段
					submitData.name = that.formData.name;
					submitData.pkname = that.formData.pkname;
					submitData.version = that.formData.version;
					submitData.versionCode = that.formData.versionCode;
					submitData.info = that.formData.info;
					submitData.downloadType = that.formData.diskType;
					submitData.downloadUrl = that.formData.downloadUrl;
					submitData.downloadPw = that.formData.extractCode;
					submitData.urlSchemes = that.formData.urlSchemes;
					submitData.size = that.convertSizeToKB();
					submitData.logo = that.formData.logo;
					submitData.badge = that.formData.badge;
					submitData.system = that.formData.system;
					submitData.sort = that.selectedCategories.join(',');
					submitData.tab = that.selectedTags.join(',');
					submitData.infoImg = that.formData.previewImages.join('||');
				}
				// 发送请求
				uni.showLoading({
					title: that.$t('syappbox.post.submited')
				});
				that.$Net.request({
					url: that.$API.PluginLoad('sy_appbox'),
					data: submitData,
					success: (res) => {
						if (res.data.code === 200) {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
							setTimeout(() => {
								// 返回到应用详情页
								uni.navigateBack();
							}, 1500);
						} else {
							uni.showToast({
								title: res.data.msg || that.$t('syappbox.post.submitfail'),
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: that.$t('common.networkfail'),
							icon: 'none'
						});
					},
					complete: () => uni.hideLoading()
				});
			},
			// 选择应用图标
			chooseAppLogo() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.uploadImage(res.tempFilePaths[0], 'logo')
					}
				})
			},
			// 选择预览图
			choosePreviewImages() {
				const count = 9 - this.formData.previewImages.length
				uni.chooseImage({
					count,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						res.tempFilePaths.forEach(path => {
							this.uploadImage(path, 'preview')
						})
						// 添加延时以确保图片加载完成后再滚动
						setTimeout(() => {
							// 获取滚动区域的宽度并设置滚动位置
							const query = uni.createSelectorQuery()
							query.select('.preview-list').boundingClientRect(data => {
								if (data) {
									this.scrollLeft = data.width
								}
							}).exec()
						}, 300)
					}
				})
			},
			uploadImage(filePath, type) {
				var that = this;
				uni.showLoading({
					title: that.$t('common.upload')
				})

				uni.uploadFile({
					url: that.$API.upload(), // 使用您的上传接口
					filePath: filePath,
					name: 'file',
					formData: {
						token: that.token
					},
					success: (res) => {
						const data = JSON.parse(res.data)
						if (data.code === 1) { // 根据您的接口返回改判断条件
							if (type === 'logo') {
								that.formData.logo = data.data.url
							} else {
								that.formData.previewImages.push(data.data.url)
							}
							uni.showToast({
								title: that.$t('syappbox.post.uploadsuccess'),
								icon: 'success'
							})
						} else {
							uni.showToast({
								title: data.msg || that.$t('syappbox.post.uploadfail'),
								icon: 'none'
							})
						}
						uni.hideLoading()
					},
					fail: () => {
						uni.showToast({
							title: that.$t('syappbox.post.uploadfail'),
							icon: 'none'
						})
						uni.hideLoading()
					},
				})
			},
			// 删除预览图
			deletePreview(index) {
				this.formData.previewImages.splice(index, 1)
			},
			// 获取分类名称
			getCategoryName(id) {
				var that = this;
				// 先从已加载的分类列表中查找
				const category = that.filteredCategories.find(item => item.id === id);
				if (category) {
					return category.name;
				}
				// 如果没找到，发起请求获取分类信息
				that.$Net.request({
					url: that.$API.PluginLoad('sy_appbox'),
					data: {
						action: 'getSortList',
						getsort_order: 'sort',
						getsort_page: 1,
						getsort_limit: 1,
						getsort_id: id // 直接搜索ID
					},
					success: (res) => {
						if (res.data.code === 200 && res.data.data.length > 0) {
							// 找到对应的分类
							const category = res.data.data.find(item => item.id === id);
							if (category) {
								// 更新filteredCategories，避免重复请求
								if (!that.filteredCategories.some(item => item.id === id)) {
									that.filteredCategories.push(category);
								}
								return category.name;
							}
						}
					}
				});
				// 如果还是没找到，返回ID
				return that.$t('global.classify')`${id}`;
			},

			// 获取标签名称
			getTagName(id) {
				var that = this;
				// 先从已加载的标签列表中查找
				const tag = that.filteredTags.find(item => item.id === id);
				if (tag) {
					return tag.name;
				}

				// 如果没找到，发起请求获取标签信息
				that.$Net.request({
					url: that.$API.PluginLoad('sy_appbox'),
					data: {
						action: 'getSortList',
						getsort_order: 'tab',
						getsort_page: 1,
						getsort_limit: 1,
						getsort_id: id // 直接搜索ID
					},
					success: (res) => {
						if (res.data.code === 200 && res.data.data.length > 0) {
							// 找到对应的标签
							const tag = res.data.data.find(item => item.id === id);
							if (tag) {
								// 更新filteredTags，避免重复请求
								if (!that.filteredTags.some(item => item.id === id)) {
									that.filteredTags.push(tag);
								}
								return tag.name;
							}
						}
					}
				});

				// 如果还是没找到，返回ID
				return that.$t('global.lable')`${id}`;
			},

			// 修改显示分类选择器方法
			openCategoryPicker() {
				var that = this;
				that.tempSelectedCategories = [...that.selectedCategories];
				that.showCategoryPicker = true;
				that.categoryPage = 1;
				that.loadingCategories = true; // 显示加载动画

				// 加载分类数据
				that.$Net.request({
					url: that.$API.PluginLoad('sy_appbox'),
					data: {
						action: 'getSortList',
						getsort_order: 'sort',
						getsort_page: 1,
						getsort_limit: 30
					},
					success: (res) => {
						if (res.data.code === 200) {
							that.filteredCategories = res.data.data;
						}
						that.loadingCategories = false; // 隐藏加载动画
					},
					fail: () => {
						uni.showToast({
							title: that.$t('common.networkfail'),
							icon: 'none'
						})
						that.loadingCategories = false; // 隐藏加载动画
					}
				});
			},

			// 修改关闭分类选择器方法
			closeCategoryPicker() {
				this.showCategoryPicker = false;
				this.categorySearch = '';
				// 不需要重置filteredCategories
			},

			// 修改确认分类选择方法
			confirmCategory() {
				var that = this;
				that.selectedCategories = [...that.tempSelectedCategories]
				that.showCategoryPicker = false
				that.categorySearch = ''
				// 添加提示
				uni.showToast({
					title: that.$t('common.selected') + that.selectedCategories.length + that.$t('syappbox.post.partitions'),
					icon: 'none'
				})
			},

			// 时切换分类选择
			toggleTempCategory(id) {
				var that = this;
				const index = that.tempSelectedCategories.indexOf(id)
				if (index > -1) {
					that.tempSelectedCategories.splice(index, 1)
				} else if (that.tempSelectedCategories.length < 3) {
					that.tempSelectedCategories.push(id)
				} else {
					uni.showToast({
						title: that.$t('syappbox.post.mostselthree'),
						icon: 'none'
					})
				}
			},
			// 搜索分类
			searchCategories() {
				var that = this;
				// 清空当前列表
				that.filteredCategories = [];

				// 发起搜索请求
				that.$Net.request({
					url: that.$API.PluginLoad('sy_appbox'),
					data: {
						action: 'getSortList',
						getsort_order: 'sort',
						getsort_search: that.categorySearch,
						getsort_page: 1,
						getsort_limit: 30
					},
					success: (res) => {
						if (res.data.code === 200) {
							that.filteredCategories = res.data.data;
						}
					}
				});
			},

			// 加载更多分类
			loadMoreCategories() {
				var that = this;
				if (that.categoryLoading) return;
				that.categoryLoading = true;

				that.$Net.request({
					url: that.$API.PluginLoad('sy_appbox'),
					data: {
						action: 'getSortList',
						getsort_order: 'sort',
						getsort_search: that.categorySearch,
						getsort_page: that.categoryPage + 1,
						getsort_limit: 30
					},
					success: (res) => {
						if (res.data.code === 200 && res.data.data.length > 0) {
							that.filteredCategories = [...that.filteredCategories, ...res.data.data];
							that.categoryPage++;
						}
						that.categoryLoading = false;
					},
					fail: () => {
						uni.showToast({
							title: that.$t('common.networkfail'),
							icon: 'none'
						})
						that.categoryLoading = false; // 隐藏加载动画
					}
				});
			},

			// 标签相关方法
			openTagPicker() {
				var that = this;
				that.tempSelectedTags = [...that.selectedTags];
				that.showTagPicker = true;
				that.tagPage = 1;
				that.loadingTags = true; // 显示加载动画

				// 加载标签数据
				that.$Net.request({
					url: that.$API.PluginLoad('sy_appbox'),
					data: {
						action: 'getSortList',
						getsort_order: 'tab',
						getsort_page: 1,
						getsort_limit: 30
					},
					success: (res) => {
						if (res.data.code === 200) {
							that.filteredTags = res.data.data;
						}
						that.loadingTags = false; // 隐藏加载动画
					},
					fail: () => {
						uni.showToast({
							title: that.$t('common.networkfail'),
							icon: 'none'
						})
						that.loadingTags = false; // 隐藏加载动画
					}
				});
			},

			closeTagPicker() {
				this.showTagPicker = false;
				this.tagSearch = '';
				// 不需要重置filteredTags
			},

			confirmTag() {
				this.selectedTags = [...this.tempSelectedTags]
				this.showTagPicker = false
				this.tagSearch = ''
			},

			toggleTempTag(id) {
				var that = this;
				const index = that.tempSelectedTags.indexOf(id)
				if (index > -1) {
					that.tempSelectedTags.splice(index, 1)
				} else if (that.tempSelectedTags.length < 10) {
					that.tempSelectedTags.push(id)
				} else {
					uni.showToast({
						title: that.$t('syappbox.post.mostseltenlable'),
						icon: 'none'
					})
				}
			},

			searchTags() {
				var that = this;
				// 清空当前列表
				that.filteredTags = [];

				// 发起搜索请求
				that.$Net.request({
					url: that.$API.PluginLoad('sy_appbox'),
					data: {
						action: 'getSortList',
						getsort_order: 'tab',
						getsort_search: that.tagSearch,
						getsort_page: 1,
						getsort_limit: 30
					},
					success: (res) => {
						if (res.data.code === 200) {
							that.filteredTags = res.data.data;
						}
					}
				});
			},
			// 加载更多标签
			loadMoreTags() {
				var that = this;
				if (that.tagLoading) return;
				that.tagLoading = true;

				that.$Net.request({
					url: that.$API.PluginLoad('sy_appbox'),
					data: {
						action: 'getSortList',
						getsort_order: 'tab',
						getsort_search: that.tagSearch,
						getsort_page: that.tagPage + 1,
						getsort_limit: 30
					},
					success: (res) => {
						if (res.data.code === 200 && res.data.data.length > 0) {
							that.filteredTags = [...that.filteredTags, ...res.data.data];
							that.tagPage++;
						}
						that.tagLoading = false;
					},
					fail: () => {
						uni.showToast({
							title: that.$t('common.networkfail'),
							icon: 'none'
						})
						that.tagLoading = false; // 隐藏加载动画
					}
				});
			},

			// 选择网盘类型
			selectDiskType(type) {
				var that = this;
				that.formData.diskType = type
				// 根据类型更新placeholder
				switch (type) {
					case 'lz':
						that.formData.downloadUrlPlaceholder = that.$t('syappbox.post.plsbluemcloudlink')
						that.formData.extractCodePlaceholder = that.$t('syappbox.post.plsbluemcode')
						break
					case '123':
						that.formData.downloadUrlPlaceholder = that.$t('syappbox.post.pls123cloudlink')
						that.formData.extractCodePlaceholder = that.$t('syappbox.post.pls123cloudcode')
						break
					case 'zl':
						that.formData.downloadUrlPlaceholder = that.$t('syappbox.post.plsotherdirect')
						that.formData.extractCodePlaceholder = that.$t('syappbox.post.directnocode')
						break
					default:
						that.formData.downloadUrlPlaceholder = that.$t('syappbox.post.plscloudlink')
						that.formData.extractCodePlaceholder = that.$t('syappbox.post.plsextractcode')
				}
			},

			// 处理大小单位变化
			handleSizeUnitChange(e) {
				this.formData.sizeUnit = this.sizeUnits[e.detail.value]
			},

			// 提交前转换大小为KB
			convertSizeToKB() {
				const size = parseFloat(this.formData.sizeDisplay)
				if (isNaN(size)) return 0

				if (this.formData.sizeUnit === 'gb') {
					return Math.round(size * 1024 * 1024)
				} else {
					return Math.round(size * 1024)
				}
			},

			openDiskTypePicker() {
				this.tempDiskType = this.formData.diskType
				this.showDiskTypePicker = true
			},

			closeDiskTypePicker() {
				this.showDiskTypePicker = false
			},

			selectTempDiskType(type) {
				this.tempDiskType = type
			},

			confirmDiskType() {
				this.formData.diskType = this.tempDiskType
				// 清空已输入的链接和提取码
				this.formData.downloadUrl = ''
				this.formData.extractCode = ''
				this.showDiskTypePicker = false
			},

			// 跳转到获取应用信息页面
			goToGetAppInfo() {
				var that = this;
				const url = that.SPgetAppInfoUrl + '?token=' + that.token;
				// 使用通用的webview跳转方法
				that.goWeb(url, that.$t('syappbox.post.getappinfo'));
			},
			goWeb(url, name) {
				// #ifdef APP-PLUS || MP-WEIXIN
				uni.navigateTo({
					url: '/pages/contents/webview?url=' + url + '&name=' + name
				})
				// plus.runtime.openWeb(url);
				// #endif
				// #ifdef H5
				window.open(url)
				// #endif
			},
			userStatus() {
				var that = this;
				that.$Net.request({
					url: that.$API.userStatus(),
					data: {
						"token": that.token
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					method: "get",
					dataType: 'json',
					success: function(res) {
						if (res.data.code == 1) {
							that.assets = res.data.data.assets;
							that.group = res.data.data.groupKey; // 保存用户组信息
							that.initBadgeTypes(); // 初始化铭牌选项
						}
						that.isLoading = 1;
					},
					fail: function(res) {
						uni.showToast({
							title: that.$t('common.networkfail'),
							icon: 'none'
						})
					}
				})
			},
			// 解析信息JSON
			parseAppJson(jsonStr) {
				var that = this;
				try {
					const appInfo = JSON.parse(jsonStr);
					// 填充表单数据
					that.formData.name = appInfo.appName || '';
					that.formData.pkname = appInfo.packageName || '';
					that.formData.version = appInfo.versionName || '';
					that.formData.versionCode = appInfo.versionCode || '';
					that.formData.urlSchemes = appInfo.urlScheme || '';
					// 处理文件大小（从KB转换为MB）
					if (appInfo.appSize) {
						const sizeMB = (appInfo.appSize / 1024).toFixed(2);
						that.formData.sizeDisplay = sizeMB;
						that.formData.sizeUnit = 'MB';
					}
					// 处理应用类型
					if (appInfo.appType) {
						that.formData.system = appInfo.appType;
					}
					// 如果有图标URL，设置图标
					if (appInfo.icon) {
						that.formData.logo = appInfo.icon;
					}

					uni.showToast({
						title: that.$t('syappbox.post.appinfoimport'),
						icon: 'success'
					});
				} catch (e) {
					uni.showToast({
						title: that.$t('syappbox.post.jsonformatfail'),
						icon: 'none'
					});
				}
			},
			// 监听页面消息
			onMessage(event) {
				try {
					const data = event.detail.data[0];
					if (data && data.type === 'appInfo') {
						this.parseAppJson(data.content);
					}
				} catch (e) {
					
				}
			},
			// 添加一个辅助方法用于验证URL
			isValidUrl(url) {
				try {
					new URL(url);
					return true;
				} catch {
					return false;
				}
			},
			// 修改加载应用信息的方法
			loadAppInfo() {
				var that = this;
				uni.showLoading({
					title: that.$t('common.loadmore')
				});
				uni.request({
					url: that.$API.PluginLoad('sy_appbox'),
					data: {
						action: 'getAppInfo',
						getapp_appid: that.appId,
						getapp_token: that.token,
						getapp_isedit: 'true'
					},
					method: 'GET',
					dataType: 'json',
					success: (res) => {
						if (res.data.code === 200 && res.data.data.length > 0) {
							const appInfo = res.data.data[0];
							// 转换大小显示
							let sizeDisplay = '';
							let sizeUnit = 'MB';
							if (appInfo.size) {
								const sizeInMb = appInfo.size / 1024; // 转换为MB
								if (sizeInMb >= 1024) {
									sizeDisplay = (sizeInMb / 1024).toFixed(2); // 转换为GB
									sizeUnit = 'GB';
								} else {
									sizeDisplay = sizeInMb.toFixed(2);
									sizeUnit = 'MB';
								}
							}
							// 填充基本表单数据
							that.formData = {
								name: appInfo.name,
								sizeDisplay: sizeDisplay,
								sizeUnit: sizeUnit,
								version: appInfo.version || '1.0.0',
								versionCode: appInfo.versionCode || 100,
								pkname: appInfo.pkname || '',
								badge: appInfo.type || '1',
								system: appInfo.system || 'android',
								logo: appInfo.logo,
								info: appInfo.info.replace(/<br\s*\/?>/g, '\n').replace(/<\/?p>/g, ''),
								previewImages: appInfo.infoImg.split('||').filter(img => img),
								urlSchemes: appInfo.urlschemes || '',
								diskType: 'lz',
								downloadUrl: '',
								extractCode: ''
							};
							// 设置分类和标签
							if (appInfo.sort) {
								that.selectedCategories = appInfo.sort.split(',').map(id => parseInt(id));
							}
							if (appInfo.tab) {
								that.selectedTags = appInfo.tab.split(',').map(id => parseInt(id));
							}
							// 获取下载信息
							that.getDownloadInfo();

						} else {
							uni.showToast({
								title: that.$t('syappbox.post.loadappinfofail'),
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: that.$t('common.networkfail'),
							icon: 'none'
						});
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			},

			// 添加获取下载信息的方法
			getDownloadInfo() {
				var that = this;
				uni.request({
					url: that.$API.PluginLoad('sy_appbox'),
					data: {
						action: 'getDownUrl',
						geturl_appid: that.appId,
						geturl_type: 'initial',
						geturl_token: that.token
					},
					method: 'GET',
					dataType: 'json',
					success: (res) => {
						if (res.data.code === 200 && res.data.data) {
							const downloadInfo = res.data.data;
							// 更新表单数据中的下载相关信息
							that.formData = {
								...that.formData,
								downloadUrl: downloadInfo.downloadUrl || '',
								extractCode: downloadInfo.downloadPw || '',
								diskType: downloadInfo.downloadType || 'other'
							};
						} else {
							uni.showToast({
								title: that.$t('syappbox.post.getdownloadfail'),
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: that.$t('syappbox.post.getdownloadfail'),
							icon: 'none'
						});
					}
				});
			},

			formatSize(sizeInKB) {
				if (!sizeInKB) return this.$t('global.unknown');
				const sizeInMB = sizeInKB / 1024;
				if (sizeInMB >= 1024) {
					// 大于等于1GB时显示GB
					return (sizeInMB / 1024).toFixed(2) + ' GB';
				} else {
					// 否则显示MB
					return sizeInMB.toFixed(2) + ' MB';
				}
			},
			initBadgeTypes() {
				// 基础选项(所有用户都可见)
				const baseTypes = [{
						value: '1',
						name: this.$t('global.transport')
					},
					{
						value: '2',
						name: this.$t('global.original')
					}
				];

				// 管理员可见的额外选项
				const adminTypes = [{
						value: '3',
						name: this.$t('global.goldlabel')
					},
					{
						value: '4',
						name: this.$t('global.official')
					}
				];

				// 如果是管理员,显示所有选项
				if (this.group === 'administrator') {
					this.badgeTypes = [...baseTypes, ...adminTypes];
				} else {
					// 非管理员只显示基础选项
					this.badgeTypes = baseTypes;
				}
			},
			// 获取上一个版本信息
			getLastVersion() {
				var that = this;
				if (that.type !== 'version') return;

				that.$Net.request({
					url: that.$API.PluginLoad('sy_appbox'),
					data: {
						action: 'getOldAppList',
						getold_appid: that.appId,
						getold_page: 1,
						getold_limit: 1, // 只需要最新的一个版本
						getold_token: that.token
					},
					success: (res) => {
						if (res.data.code === 200 && res.data.data.versions && res.data.data.versions.length >0) {
							// 获取最新的版本信息
							that.lastVersion = res.data.data.versions[0];

							// 预填充部分表单数据
							that.formData.version = ''; // 清空版本号等待用户输入
							that.formData.versionCode = parseInt(that.lastVersion.versionCode) + 1; // 自动递增版本码

							// 如果是可选字段,使用上一版本的值作为默认值
							if (!that.formData.name) {
								that.formData.name = that.lastVersion.name;
							}
							if (!that.formData.logo) {
								that.formData.logo = that.lastVersion.logo;
							}
							if (!that.formData.sizeDisplay) {
								// 转换size为显示格式
								const sizeInMb = that.lastVersion.size / 1024;
								if (sizeInMb >= 1024) {
									that.formData.sizeDisplay = (sizeInMb / 1024).toFixed(2);
									that.formData.sizeUnit = 'GB';
								} else {
									that.formData.sizeDisplay = sizeInMb.toFixed(2);
									that.formData.sizeUnit = 'MB';
								}
							}
						} else {
							// 如果没有历史版本,可能需要从app表获取初始版本信息
							uni.showToast({
								title: that.$t('syappbox.post.getversionfail'),
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: that.$t('common.networkfail')',
							icon: 'none'
						});
					}
				});
			},
			// 验证表单
			validateForm() {
				var that = this;
				if (that.type === 'version') {
					// 版本更新模式的验证
					if (!that.formData.version) {
						uni.showToast({
							title: that.$t('syappbox.post.versionnumnonull'),
							icon: 'none'
						});
						return false;
					}
					if (!that.formData.versionCode) {
						uni.showToast({
							title: that.$t('syappbox.post.versioncodenonull'),
							icon: 'none'
						});
						return false;
					}
					if (that.lastVersion && parseInt(that.formData.versionCode) <= parseInt(that.lastVersion
						.versionCode)) {
						uni.showToast({
							title: that.$t('syappbox.post.versioncodeupward'),
							icon: 'none'
						});
						return false;
					}
					if (!that.formData.info) {
						uni.showToast({
							title: that.$t('syappbox.post.updatedescnonull'),
							icon: 'none'
						});
						return false;
					}
					if (!that.formData.downloadUrl) {
						uni.showToast({
							title: that.$t('syappbox.post.downloadurlnonull'),
							icon: 'none'
						});
						return false;
					}
				}
				return true;
			},
			// 添加图片加载事件处理方法
			onImageError(err) {
				var that = this;
				uni.showToast({
					title: that.$t('syappbox.post.picloadfail'),
					icon: 'none'
				});
			},
			onImageLoad() {
				
			},
		},
	}
</script>

<style lang="scss" scoped>
	.dark .user{
		background: #1c1c1c !important;
		min-height: 100vh;
	}
	/* 整体容器样式 */
	.user {
		min-height: 100vh;
		background: linear-gradient(180deg, #f8faff 0%, #ffffff 100%);
	}
	
	.dark {
		.quick-actions .action-btn {
			&.get-info-btn,
			&.scan-btn,
			&.parse-btn,
			&.get-info-btn.active {
				background-color: #3c3c3c !important;
				color: #c7cddb !important;
				
				&:active {
					background-color: #4c4c4c !important;
				}
			}
		}
		
		.user {
			background-color: #1c1c1c !important;
		}
		
		.content-wrapper {
			.form-section {
				background-color: #2c2c2c !important;
				color: #c7cddb !important;
			}
			
			.form-group {
				.input-wrapper {
					.suffix-text,
					.suffix-select {
						background-color: #3c3c3c !important;
						border: 1px solid #3c3c3c !important;
					}
				}
				
				.radio-group .radio-item {
					background-color: #343434 !important;
					border: 1px solid transparent !important;
					
					&.active,
					&.radio-active {
						background-color: #3c3c3c !important;
					}
					
					&.radio-active {
						border: 1px solid #b3b3b3 !important;
					}
				}
				
				.input {
					background-color: #3c3c3c !important;
				}
			}
			
			.logo-upload .logo-preview {
				background-color: #3c3c3c !important;
			}
			
			.preview-upload .preview-item.upload-btn {
				background-color: #3c3c3c !important;
				border: 1px solid #3c3c3c !important;
			}
			
			.submit-section .submit-btn {
				color: #f2f2f2 !important;
			}
		}
		
		.select-btn,
		.select-btn.active {
			background-color: #3c3c3c !important;
		}
		
		input,
		textarea {
			background-color: #3c3c3c !important;
			border: 1px solid #3c3c3c !important;
		}
	}
	/* 内容区样式 */
	.content-wrapper {
		padding: 30rpx;

		.quick-actions {
			display: flex;
			gap: 20rpx;
			margin: 20rpx 0 40rpx;

			.action-btn {
				flex: 1;
				height: 90rpx;
				border-radius: 45rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 12rpx;
				font-size: 28rpx;
				color: #fff;
				border: none;
				box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.05);
				transition: all 0.3s;

				&.parse-btn {
					background: linear-gradient(135deg, #57d1b1, #00b4db);

					&:active {
						background: linear-gradient(135deg, #4ac0a2, #009ec1);
					}
				}

				&.scan-btn {
					background: linear-gradient(135deg, #8E2DE2, #4A00E0);

					&:active {
						background: linear-gradient(135deg, #7d28c9, #4000c4);
					}
				}

				&.get-info-btn {
					background: linear-gradient(135deg, #FF9800, #FF5722);

					&:active {
						background: linear-gradient(135deg, #F57C00, #E64A19);
					}
				}

				text {
					font-size: 32rpx;
				}
			}
		}

		/* 表单区域样式 */
		.form-section {
			background: #fff;
			border-radius: 24rpx;
			padding: 30rpx;
			box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.03);
			margin-bottom: 30rpx;

			.section-title {
				display: flex;
				align-items: center;
				margin: 20rpx 0 30rpx;

				.title-text {
					font-size: 32rpx;
					font-weight: 600;
					color: #333;
					position: relative;
					padding-left: 24rpx;

					&::before {
						content: '';
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						width: 6rpx;
						height: 28rpx;
						background: #57d1b1;
						border-radius: 6rpx;
					}
				}

				.title-line {
					flex: 1;
					height: 1px;
					background: linear-gradient(to right, #eee 0%, transparent 100%);
					margin-left: 20rpx;
				}
			}
		}

		/* Logo上传区域 */
		.logo-upload {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 30rpx 0;

			.logo-preview {
				width: 160rpx;
				height: 160rpx;
				border-radius: 40rpx;
				background: #f8faff;
				border: 2rpx dashed #ddd;
				display: flex;
				align-items: center;
				justify-content: center;
				overflow: hidden;
				transition: all 0.3s;
				box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.02);

				&:active {
					transform: scale(0.95);
				}

				image {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}

				.tn-icon-upload {
					font-size: 60rpx;
					color: #ccc;
				}
			}
		}

		/* 预览图上传区域 */
		.preview-upload {
			margin: 30rpx 0;

			.preview-scroll {
				width: 100%;
			}

			.preview-list {
				display: flex;
				padding: 20rpx 0;
				overflow-x: auto;

				&::-webkit-scrollbar {
					display: none;
				}
			}

			.preview-item {
				position: relative;
				width: 240rpx;
				height: 440rpx;
				margin-right: 20rpx;
				border-radius: 20rpx;
				overflow: hidden;
				box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.05);
				flex-shrink: 0;

				&.upload-btn {
					background: #f8faff;
					border: 2rpx dashed #ddd;
					display: flex;
					align-items: center;
					justify-content: center;

					.tn-icon-add {
						font-size: 60rpx;
						color: #ccc;
					}

					&:active {
						background: #f0f0f0;
					}
				}

				image {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}

				.delete-btn {
					position: absolute;
					top: 10rpx;
					right: 10rpx;
					width: 44rpx;
					height: 44rpx;
					border-radius: 22rpx;
					background: rgba(0, 0, 0, 0.6);
					display: flex;
					align-items: center;
					justify-content: center;
					backdrop-filter: blur(10rpx);

					.tn-icon-close {
						color: #fff;
						font-size: 24rpx;
					}
				}
			}

			.scroll-indicator {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 16rpx 0;
				gap: 8rpx;

				.indicator-text {
					font-size: 24rpx;
					color: #999;
				}

				.indicator-icon {
					font-size: 24rpx;
					color: #999;
					animation: slideRight 1.5s infinite;
				}
			}

			@keyframes slideRight {
				0% {
					transform: translateX(0);
					opacity: 0.3;
				}

				50% {
					transform: translateX(10rpx);
					opacity: 1;
				}

				100% {
					transform: translateX(0);
					opacity: 0.3;
				}
			}

			.upload-tip {
				font-size: 24rpx;
				color: #999;
				margin-top: 20rpx;
				text-align: center;
			}
		}

		/* 表单控件样式 */
		.form-group {
			margin-bottom: 30rpx;

			.label {
				font-size: 28rpx;
				color: #666;
				margin-bottom: 15rpx;
				display: block;
			}

			.input {
				width: 100%;
				height: 88rpx;
				background: #f8faff;
				border-radius: 16rpx;
				padding: 0 30rpx;
				font-size: 28rpx;
				color: #333;
				border: 2rpx solid #eee;
				transition: all 0.3s;

				&:focus {
					border-color: #57d1b1;
					background: #fff;
					box-shadow: 0 0 0 2rpx rgba(87, 209, 177, 0.1);
				}
			}

			.version-inputs {
				display: flex;
				gap: 20rpx;

				.version-name {
					flex: 2;
				}

				.version-code {
					flex: 1;
				}
			}

			.textarea {
				width: 100%;
				height: 300rpx;
				background: #f8faff;
				border-radius: 16rpx;
				padding: 20rpx 30rpx;
				font-size: 28rpx;
				color: #333;
				border: 2rpx solid #eee;
				transition: all 0.3s;

				&:focus {
					border-color: #57d1b1;
					background: #fff;
					box-shadow: 0 0 0 2rpx rgba(87, 209, 177, 0.1);
				}
			}

			.radio-group {
				display: flex;
				gap: 20rpx;
				flex-wrap: wrap;

				.radio-item {
					padding: 20rpx 30rpx;
					background: #f8faff;
					border-radius: 16rpx;
					border: 2rpx solid #eee;
					font-size: 28rpx;
					color: #666;
					transition: all 0.3s ease;
					display: flex;
					align-items: center;
					gap: 8rpx;

					.sub-text {
						font-size: 24rpx;
						color: #999;
					}

					&.radio-active {
						background: linear-gradient(135deg, #57d1b1, #00b4db);
						border-color: transparent;
						color: #fff;
						box-shadow: 0 6rpx 16rpx rgba(87, 209, 177, 0.25);

						.sub-text {
							color: rgba(255, 255, 255, 0.8);
						}
					}

					&:active {
						transform: scale(0.95);
					}
				}
			}

			.input-wrapper {
				display: flex;
				align-items: center;

				.input {
					flex: 1;
					border-radius: 16rpx 0 0 16rpx;
					border-right: none;
				}

				.suffix-select,
				.suffix-text {
					height: 88rpx;
					background: #f7f8fa;
					display: flex;
					align-items: center;
					padding: 0 30rpx;
					border-radius: 0 16rpx 16rpx 0;
					border: 2rpx solid #eee;
					border-left: none;

					text {
						font-size: 28rpx;
						color: #666;

						&.tn-icon-down {
							margin-left: 8rpx;
							font-size: 24rpx;
							color: #999;
						}
					}
				}

				.suffix-text {
					padding: 0 20rpx;
					background: #f7f8fa;

					text {
						font-size: 28rpx;
						color: #666;
					}
				}
			}

			.size-input {
				display: flex;
				align-items: center;
				gap: 20rpx;

				.input {
					flex: 1;
				}

				.unit {
					font-size: 28rpx;
					color: #666;
					padding: 0 20rpx;
				}
			}
		}

		/* 分类标签样式 */
		.category-section {

			.label-wrapper {
				display: flex;
				align-items: center;
				margin-bottom: 15rpx;

				.selected-count {
					font-size: 24rpx;
					color: #999;
					margin-left: 10rpx;
				}
			}

			.selected-tags {
				display: flex;
				flex-wrap: wrap;
				gap: 15rpx;
				margin-bottom: 20rpx;
				padding: 10rpx 0;

				.selected-tag {
					background: #e8f6f3;
					padding: 12rpx 24rpx;
					border-radius: 30rpx;
					font-size: 26rpx;
					color: #57d1b1;
					display: flex;
					align-items: center;
					transition: all 0.3s ease;
					box-shadow: 0 4rpx 12rpx rgba(87, 209, 177, 0.1);

					&:active {
						transform: scale(0.95);
					}

					.remove-tag {
						margin-left: 10rpx;
						font-size: 32rpx;
						line-height: 1;
						padding: 0 4rpx;

						&:active {
							opacity: 0.7;
						}
					}
				}
			}

			.select-btn {
				height: 88rpx;
				background: #f7f8fa;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx;
				transition: all 0.25s ease;

				.btn-text {
					font-size: 28rpx;
					color: #333;
				}

				.tn-icon-right {
					font-size: 24rpx;
					color: #999;
				}

				&:active {
					background: #f0f1f5;
				}
			}
		}

		/* 提交按钮样式 */
		.submit-section {
			margin: 60rpx 0;
			padding: 0 30rpx;

			.submit-btn {
				width: 100%;
				height: 90rpx;
				border-radius: 45rpx;
				background: #57d1b1;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 32rpx;
				font-weight: 500;
				border: none;
				box-shadow: none;
				transition: all 0.3s;

				&:active {
					opacity: 0.9;
					transform: none;
				}
			}
		}
	}

	/* 提示文字样式 */
	.upload-tip {
		font-size: 24rpx;
		color: #999;
		margin-top: 20rpx;
		text-align: center;
	}

	.picker-popup {
		background: #fff;
		border-radius: 24rpx 24rpx 0 0;

		.picker-header {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			border-bottom: 1rpx solid #eee;

			.title {
				font-size: 32rpx;
				font-weight: 500;
			}

			.cancel,
			.confirm {
				font-size: 28rpx;
				color: #666;
			}

			.confirm {
				color: #57d1b1;
				font-weight: 500;
			}
		}

		.search-box {
			margin: 20rpx 30rpx;
			height: 80rpx;
			background: #f8faff;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			border: 2rpx solid #eee;
			transition: all 0.3s ease;

			&:focus-within {
				border-color: #57d1b1;
				background: #fff;
				box-shadow: 0 0 0 2rpx rgba(87, 209, 177, 0.1);
			}

			.tn-icon-search {
				font-size: 36rpx;
				color: #999;
				margin-right: 20rpx;
			}

			input {
				flex: 1;
				font-size: 28rpx;
				color: #333;

				&::placeholder {
					color: #999;
				}
			}
		}

		.picker-content {
			height: 600rpx;
			padding: 0 30rpx 30rpx;
			position: relative;

			.tags-container {
				display: flex;
				flex-wrap: wrap;
				padding: 20rpx 0;
				gap: 30rpx;

				.tag {
					min-width: 140rpx;
					padding: 20rpx 46rpx;
					background: #fff;
					border-radius: 16rpx;
					font-size: 28rpx;
					color: #666;
					text-align: center;
					transition: all 0.3s ease;
					box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

					&:active {
						transform: scale(0.95);
					}

					&.tag-active {
						background: #57d1b1;
						color: #fff;
						font-weight: 500;
						box-shadow: 0 6rpx 16rpx rgba(87, 209, 177, 0.25);

						&:active {
							transform: scale(0.95);
							box-shadow: 0 3rpx 8rpx rgba(87, 209, 177, 0.15);
						}
					}
				}

			}
		}
	}

	.unit-select {
		min-width: 100rpx;
		height: 88rpx;
		background: #f8faff;
		border-radius: 16rpx;
		border: 2rpx solid #eee;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8rpx;
		padding: 0 20rpx;
		margin-left: 20rpx;

		text {
			font-size: 28rpx;
			color: #666;

			&.tn-icon-down {
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	/* 修改主题色相样式 */
	.button-group {
		display: flex;
		gap: 20rpx;

		.button-item {
			flex: 1;
			height: 88rpx;
			background: #f8faff;
			border-radius: 16rpx;
			border: 2rpx solid #eee;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #666;
			transition: all 0.3s ease;

			&.button-active {
				background: v-bind('themeColor.gradient');
				border-color: transparent;
				color: #fff;
				box-shadow: 0 6rpx 16rpx rgba(0, 183, 238, 0.25);
			}

			&:active {
				transform: scale(0.95);
			}
		}
	}

	.disk-type-list {
		padding: 20rpx;

		.disk-type-item {
			padding: 24rpx;
			border-radius: 8rpx;
			background: #f7f8fa;
			margin-bottom: 12rpx;
			transition: all 0.25s ease;

			&:active {
				background: #f0f1f5;
			}

			&.disk-type-active {
				background: #57d1b1;
				color: #fff;
				position: relative;

				&::after {
					content: '✓';
					position: absolute;
					right: 24rpx;
					top: 50%;
					transform: translateY(-50%);
					font-size: 28rpx;
				}

				.disk-desc {
					color: rgba(255, 255, 255, 0.8);
				}
			}

			.disk-name {
				font-size: 28rpx;
				font-weight: 500;
				margin-bottom: 6rpx;
			}

			.disk-desc {
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	/* 修改其他使用主题色的地方 */
	.submit-btn {
		background: #57d1b1 !important;
		box-shadow: none !important;

		&:active {
			opacity: 0.9;
			transform: none;
		}
	}

	.radio-item.radio-active {
		background: #57d1b1 !important;
		box-shadow: none !important;
	}

	.tag.tag-active {
		background: #57d1b1 !important;
		box-shadow: none !important;
	}

	.input:focus,
	.textarea:focus {
		border-color: #57d1b1 !important;
		box-shadow: none !important;
	}

	.confirm {
		color: #57d1b1 !important;
	}

	/* 修改系统兼容按钮组样式 */
	.system-group {
		display: flex;
		background: #f7f8fa;
		padding: 4rpx;
		border-radius: 12rpx;

		.system-item {
			flex: 1;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #666;
			transition: all 0.25s ease;
			position: relative;
			z-index: 1;
			border-radius: 8rpx;

			&.system-active {
				color: #57d1b1;
				background: #fff;
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
			}
		}
	}

	/* 修改网盘型选择样 */
	.disk-type-list {
		padding: 20rpx;

		.disk-type-item {
			padding: 24rpx;
			border-radius: 8rpx;
			background: #f7f8fa;
			margin-bottom: 12rpx;
			transition: all 0.25s ease;

			&:active {
				background: #f0f1f5;
			}

			&.disk-type-active {
				background: #57d1b1;
				color: #fff;
				position: relative;

				&::after {
					content: '✓';
					position: absolute;
					right: 24rpx;
					top: 50%;
					transform: translateY(-50%);
					font-size: 28rpx;
				}

				.disk-desc {
					color: rgba(255, 255, 255, 0.8);
				}
			}

			.disk-name {
				font-size: 28rpx;
				font-weight: 500;
				margin-bottom: 6rpx;
			}

			.disk-desc {
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	/* 修改选择按钮的通用样式 */
	.select-btn {
		height: 88rpx;
		background: #f7f8fa;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		transition: all 0.25s ease;

		.btn-text {
			font-size: 28rpx;
			color: #333;
		}

		.tn-icon-right {
			font-size: 24rpx;
			color: #999;
		}

		&:active {
			background: #f0f1f5;
		}
	}

	/* 修系统兼容按钮组样式 */
	.system-group {
		display: flex;
		background: #f7f8fa;
		padding: 4rpx;
		border-radius: 12rpx;

		.system-item {
			flex: 1;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #666;
			transition: all 0.25s ease;
			position: relative;
			z-index: 1;
			border-radius: 8rpx;

			&.system-active {
				color: #57d1b1;
				background: #fff;
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
			}
		}
	}

	/* 修改快捷操作钮样式 */
	.quick-actions {
		.action-btn {
			background: #fff !important;
			color: #333 !important;

			&.get-info-btn {
				background: #fff !important;

				&:active {
					background: #f0f1f5 !important;
				}
			}
			&.scan-btn {
				background: #fff !important;

				&:active {
					background: #f0f1f5 !important;
				}
			}
		}
	}

	/* 修改提交按钮样式 */
	.submit-btn {
		background: #57d1b1 !important;
		box-shadow: none !important;

		&:active {
			opacity: 0.9;
			transform: none;
		}
	}

	/* 修改标签选择样式 */
	.tag {
		background: #f7f8fa !important;
		box-shadow: none !important;
		border-radius: 8rpx !important;

		&.tag-active {
			background: #57d1b1 !important;
			box-shadow: none !important;
		}
	}

	/* 修改APP铭牌选择样式 */
	.radio-group {
		.radio-item {
			background: #f7f8fa;
			box-shadow: none;
			border-radius: 8rpx;

			&.radio-active {
				background: #57d1b1 !important;
				box-shadow: none !important;
			}
		}
	}

	/* 修改网盘类型选择样式 */
	.disk-type-list {
		padding: 20rpx;

		.disk-type-item {
			padding: 24rpx;
			border-radius: 8rpx;
			background: #f7f8fa;
			margin-bottom: 12rpx;
			transition: all 0.25s ease;

			&:active {
				background: #f0f1f5;
			}

			&.disk-type-active {
				background: #57d1b1;
				color: #fff;
				position: relative;

				&::after {
					content: '✓';
					position: absolute;
					right: 24rpx;
					top: 50%;
					transform: translateY(-50%);
					font-size: 28rpx;
				}

				.disk-desc {
					color: rgba(255, 255, 255, 0.8);
				}
			}

			.disk-name {
				font-size: 28rpx;
				font-weight: 500;
				margin-bottom: 6rpx;
			}

			.disk-desc {
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	/* 统一输入框样式 */
	.input,
	.textarea {
		background: #f7f8fa !important;
		border: none !important;
		box-shadow: none !important;

		&:focus {
			background: #f0f1f5 !important;
			box-shadow: none !important;
		}
	}

	/* 修改选择器头部样式 */
	.picker-header {
		.confirm {
			color: #57d1b1 !important;
			font-weight: 500;
		}
	}

	.quick-actions {
		.action-btn {
			&.get-info-btn {
				background: linear-gradient(135deg, #FF9800, #FF5722);

				&:active {
					background: linear-gradient(135deg, #F57C00, #E64A19);
				}
			}
		}
	}

	.required {
		color: #ff5252;
		font-size: 28rpx;
	}

	/* 在已有的样式中添加以下内容 */
	.form-group {
		.label {
			display: flex;
			align-items: center;
			gap: 8rpx;

			.required {
				color: #ff5252;
				font-size: 28rpx;
			}

			.optional {
				color: #999;
				font-size: 24rpx;
			}
		}

		.url-scheme-input {
			display: flex;
			align-items: center;

			.input {
				flex: 1;
				border-radius: 16rpx 0 0 16rpx;
			}

			.scheme-suffix {
				background: #f8faff;
				height: 88rpx;
				padding: 0 46rpx;
				display: flex;
				align-items: center;
				color: #666;
				font-size: 36rpx;
				border-radius: 0 16rpx 16rpx 0;
			}
		}
	}

	/* 可选字段的输入框样式稍微调淡一些 */
	.optional-input {
		background: #fafbfc !important;

		&::placeholder {
			color: #bbb;
		}
	}

	.json-parser-popup {
		width: 600rpx;
		background: #fff;
		border-radius: 24rpx;
		overflow: hidden;

		.parser-header {
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #f5f5f5;

			.title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
			}

			.close-btn {
				font-size: 40rpx;
				color: #999;
				padding: 10rpx;
				line-height: 1;

				&:active {
					opacity: 0.7;
				}
			}
		}

		.parser-content {
			padding: 30rpx;

			.json-input {
				width: 100%;
				min-height: 300rpx;
				background: #f8faff;
				border-radius: 16rpx;
				padding: 20rpx;
				font-size: 28rpx;
				color: #333;
				line-height: 1.5;

				&::placeholder {
					color: #999;
				}
			}
		}

		.parser-footer {
			padding: 20rpx 30rpx 30rpx;
			display: flex;
			gap: 20rpx;

			button {
				flex: 1;
				height: 80rpx;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				border: none;

				&.cancel-btn {
					background: #f5f5f5;
					color: #666;

					&:active {
						background: #eee;
					}
				}

				&.confirm-btn {
					background: #57d1b1;
					color: #fff;

					&:active {
						opacity: 0.9;
					}
				}
			}
		}
	}

	.loading-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0;

		.loading-spinner {
			width: 60rpx;
			height: 60rpx;
			border: 4rpx solid #f3f3f3;
			border-top: 4rpx solid #57d1b1;
			border-radius: 50%;
			animation: spin 1s linear infinite;
		}

		.loading-text {
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #999;
		}
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	/* 添加提示文本样式 */
	.hint-text {
		font-size: 24rpx;
		color: #999;
		margin-top: 8rpx;
	}

	.optional {
		color: #999;
		font-size: 24rpx;
		margin-left: 8rpx;
	}
</style>